<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./lib/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>

		<script type="text/javascript">
			let mCharts = echarts.init(document.querySelector('div'));
			let pieData = [
				{
					name: '淘宝',
					value: 11231,
				},
				{
					name: '京东',
					value: 22673,
				},
				{
					name: '唯品会',
					value: 6123,
				},
				{
					name: '1号店',
					value: 8989,
				},
				{
					name: '聚美优品',
					value: 6700,
				},
			];
			let option = {
				series: [
					{
						type: 'pie',
						data: pieData,
						label: {
							//饼图的文字显示
							show: true,
							formatter: function (arg) {
								// console.log(arg);
								return (
									arg.name +
									' 消费：' +
									arg.value +
									'元\n' +
									'占比：' +
									arg.percent +
									'%'
								);
							},
						},
						// radius: 20,//饼图的半径
						// radius: '20%', //设置百分比是容器宽、高数值小的半径的20%
						// radius: ['50%', '75%'], //分别是内外圆的半径
						roseType: 'radius', //南丁格尔图 饼图的区域的半径随占比变化
						selectedMode: 'single', //选中效果  single multiple
						selectedOffset: 30, //选中偏移量
					},
				],
			};
			mCharts.setOption(option);
		</script>
	</body>
</html>
